<template>
  <div>
    <el-container style="height: 100vh">
      <el-aside class="aside" 
      :style="{ width: `${isCollapse ? 65 : 240}px`, transition: '0.4s' }">
        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" background-color="#545c64"
          :style="{ height: '100vh' }" 
          :collapse="isCollapse"
          text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item>
            <img width="30px" src="../assets/logo.png" alt="" />
            <template slot="title">
              <span style="font-size: 1.2em; color: #efefef; font-weight: bold">&nbsp;&nbsp;金燕充电</span>
            </template>
          </el-menu-item>
          <template v-for="item in menuData">
            <el-menu-item v-if="!item.children" :index="item.path" :key="item.text">
              <i :class="item.icon"></i>
              <template slot="title"> {{ item.text }} </template>
            </el-menu-item>

            <el-submenu v-else :index="item.path" :key="item.text">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.text }}</span>
              </template>

              <el-menu-item v-for="child in item.children" :key="child.text" :index="child.path">
                <i :class="child.icon"></i>
                <span slot="title">{{ child.text }}</span>
              </el-menu-item>
            </el-submenu>

          </template>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header class="header">
          <!-- 左上角收缩按钮 -->
          <i v-show="!isCollapse" class="el-icon-s-fold" @click="isCollapse = true"></i>
          <i v-show="isCollapse" class="el-icon-s-unfold" @click="isCollapse = false"></i>

        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 初始左边不折叠的配置
      isCollapse: false,
      menuData: [
        // 列表
        {
          text: "首页",
          path: "/home",
          icon: "el-icon-menu",
        },
        //添加前去router/index.js 配置
        {
          text: "电站管理", //父标题
          path: '1', //同级递增
          icon: "el-icon-office-building",//标题图标
          children: [  //子标题配置
            {
              text: "场站管理", //子标题配置bitao
              path: "/home/station_operation",//url跳转路径
              icon: "el-icon-school",//子标题图标
            },
            {
              text: "电站列表",
              path: "/home/station_watch",
              icon: "el-icon-house",
            }
          ]
        },
      ]
    }
  },

};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;

  i {
    font-size: 1.3em;
  }
}

.aside::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
  // 侧边高度
  height: 100vh;
}
</style>
